$f: 19.2;

img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}


@keyframes fadeInUp_ {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

.fadeInUp_ {
  -webkit-animation-name: fadeInUp_;
  animation-duration: 2s;
  animation-name: fadeInUp_
}

.common_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}


:root {
  --color: #3279FF;
}

.home {
  .banner {
    position: relative;

    img {
      width: 100%;
      display: block;
      object-fit: cover;
    }

    .text {
      position: absolute;
      left: 240/$f+vw;
      bottom: 178/$f+vw;

      .links {
        display: flex;
        align-items: center;
        margin-bottom: 71/$f+vw;

        a {
          color: #F1F1F1;
          font-size: 18/$f+vw;
          transition: all 600ms;

          &:hover {
            color: #146DFC;
          }
        }

        span {
          width: 40/$f+vw;
          height: 1px;
          background: #FFF;
          margin: 0 20/$f+vw;
        }
      }

      h1 {
        line-height: 1.2;
        color: #FFF;
        font-size: 75/$f+vw;
        font-weight: 600;
        text-transform: capitalize;
      }

      .line {
        width: 98/$f+vw;
        height: 8/$f+vw;
        background: linear-gradient(90deg, #3E88FF 0%, #146DFC 100%);
        margin-top: 10/$f+vw;
      }
    }
  }

  .section1 {
    padding: 100/$f+vw 240/$f+vw;
    display: flex;
    justify-content: space-between;

    .side {
      width: 211/$f+vw;
      position: sticky;
      top: 7vw;
      height: fit-content;

      .title {
        padding: 0 0 20/$f+vw;
        display: flex;
        align-items: center;
        border-bottom: 1/$f+vw solid #000;
        margin: 0 0 40/$f+vw;

        h1 {
          color: #000;
          font-size: 26/$f+vw;
          font-style: normal;
          font-weight: 500;
          text-transform: capitalize;
          margin: 0 20/$f+vw 0 0;
        }

        svg {
          width: 22/$f+vw;
          height: fit-content;
        }
      }

      .flex {
        .list {
          color: #000;
          font-size: 18/$f+vw;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          cursor: pointer;
          p{
            transition: .6s ease;
            &:hover{
              color: #3279FF;
            }
          }
          .pList{
            margin: 20/$f+vw 30/$f+vw;
            display: none;
            p{
              &:not(:last-child){
                margin-bottom: 20/$f+vw;
              }
            }
          }
          &.on {
            .p1{
              color: #3279FF;
            }
            .pList{
              display: block;
            }
          }

          &:not(:last-child) {
            margin: 0 0 36/$f+vw;
          }
        }
      }
    }

    .content {
      width: 1179/$f+vw;

      .matter {
        width: 1419/$f+vw;
        overflow: hidden;
        position: relative;
        z-index: 1;

        .joke {
          width: 1179/$f+vw;
        }

        .go_text {
          position: absolute;
          left: 122/$f+vw;
          top: -103/$f+vw;
          z-index: -1;

          .marquee-scroll {
            display: flex;
            width: 100vw;


          }

          .marquee-content {
            display: flex;

            .list {
              width: fit-content;
              opacity: 0.25;
              background: linear-gradient(270deg, rgba(216, 216, 216, 0.20) 0%, #D8D8D8 46.5%, rgba(216, 216, 216, 0.20) 100%);
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              font-size: 240/$f+vw;
              font-style: normal;
              font-weight: 700;
              line-height: normal;
              text-transform: uppercase;
              margin: 0 30/$f+vw 0 0;
            }
          }
        }

        .position {
          position: absolute;
          top: -103/$f+vw;
          left: 122/$f+vw;
          z-index: -1;
          font-size: 240/$f+vw;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          text-transform: uppercase;
          opacity: 0.25;
          background: linear-gradient(270deg, rgba(216, 216, 216, 0.20) 0%, #D8D8D8 46.5%, rgba(216, 216, 216, 0.20) 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        &:not(:last-child) {
          margin: 0 0 80/$f+vw
        }

        .headline {
          display: flex;
          align-items: center;
          margin: 0 0 40/$f+vw;

          .img {
            width: 40/$f+vw;
            height: 40/$f+vw;
            margin: 0 16/$f+vw 0 0;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              object-fit: contain;
            }
          }

          h1 {
            color: #000;
            font-size: 26/$f+vw;
            font-style: normal;
            font-weight: 500;
            text-transform: capitalize;
          }
        }

        .grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 40/$f+vw 30/$f+vw;

          .item {
            width: 100%;

            &:hover {
              .img {
                img {
                  transform: scale(1.05);
                }
              }

              .text {
                &:after {
                  transform: scaleX(1);
                }

                p {
                  color: var(--color);
                }

                .more {
                  background: var(--color);
                }
              }
            }

            .img {
              width: 100%;
              height: 272/$f+vw;
              overflow: hidden;
              border-radius: 20/$f+vw;

              img {
                width: 100%;
                height: 100%;
                transition: 1s;
              }
            }

            .text {
              margin: 30/$f+vw 0 0 0;
              padding: 0 0 23/$f+vw;
              border-bottom: 1/$f+vw solid #D9D9D9;
              display: flex;
              align-items: center;
              justify-content: space-between;
              position: relative;

              &:after {
                content: '';
                width: 95/$f+vw;
                height: 3/$f+vw;
                position: absolute;
                bottom: -2/$f+vw;
                left: 0;
                background: #3279FF;
                transform: scaleX(0);
                transform-origin: left;
                transition: .6s ease;
              }

              h1 {
                color: #000;
                font-size: 18/$f+vw;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
                transition: .6s ease;
                width: 80%;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
              }

              .more {
                width: 34/$f+vw;
                height: 34/$f+vw;
                border-radius: 50%;
                background: #000;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: .6s ease;

                svg {
                  width: 14/$f+vw;
                  height: 14/$f+vw;

                  path {
                    transition: .6s ease;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .how_content {
    width: 1440/$f+vw;
    height: 440/$f+vw;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60/$f+vw;
    position: relative;
    z-index: 1;
    border-radius: 20/$f+vw;
    background: #D4E3FF;

    .joke {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .l {
        margin: 10/$f+vw 0 0 0;

        h1 {
          color: #000;
          font-size: 48/$f+vw;
          font-style: normal;
          font-weight: 600;
          line-height: 100/$f+vw;
          /* 208.333% */
          letter-spacing: 0.96px;
          text-transform: capitalize;
        }
      }

      .r {
        width: 899/$f+vw;

        .text {
          color: #000;
          font-size: 20/$f+vw;
          font-style: normal;
          font-weight: 400;
          line-height: 36/$f+vw;
          /* 180% */
          letter-spacing: 1px;
          margin: 0 0 40/$f+vw;
        }

        a {
          display: flex;
          width: fit-content;
          padding: 8/$f+vw 30/$f+vw;
          justify-content: center;
          align-items: center;
          gap: 20/$f+vw;
          border-radius: 91/$f+vw;
          border: 1px solid #000;
          background: #000;
          transition: all 600ms;
          color: #FFF;
          font-size: 20/$f+vw;

          p {
            line-height: 2;
            letter-spacing: 1px;
            text-transform: uppercase;
          }

          svg {
            width: 16/$f+vw;
            display: block;
          }

          &:hover {
            background: #5E9EFF;
            border-color: #5E9EFF;
          }
        }
      }
    }
  }

  .foot {
    margin-top: -84/$f+vw;
  }

  @media screen and (max-width: 1024px) {
    .banner {
      margin-top: 60px;

      img {
        height: 150px;
      }

      .text {
        left: 5%;
        bottom: 30%;

        .links {
          margin-bottom: 40px;

          a {
            font-size: 14px;
          }

          span {
            width: 15px;
            margin: 0 10px;
          }
        }

        h1 {
          font-size: 20px;
        }

        .line {
          width: 60px;
          height: 2px;
          margin-top: 5px;
        }
      }
    }

    .section1 {
      padding: 25px 5%;
      overflow: hidden;
      flex-direction: column;
      .side {
        width: 100%;
        top:0;
        position: static;
        .title{
          padding: 0 0 10px;
          margin: 0 0 20px;
          h1{
            font-size: 20px;
          margin: 0 10px 0 0;
          }
          svg{
            width: 12px;
          }
        }
        .flex{
          .list{
            font-size: 18px;
            .pList{
              margin: 10px 15px;
              p{
                &:not(:last-child){
                  margin-bottom: 10px;
                }
              }
            }
            &:not(:last-child) {
              margin: 0 0 18px;
            }
          }
        }
      }

      .content {
        width: 100%;
        margin-top: 30px;
        .matter {
          width: 100%;

          .joke {
            width: 100%;

            .headline {
              margin: 0 0 20px;

              .img {
                width: 30px;
                height: 30px;
                margin: 0 10px 0 0;
              }

              h1 {
                font-size: 22px;
              }
            }

            .grid {
              grid-template-columns: repeat(1, 1fr);
              gap: 20px 0;

              .item {
                .img {
                  height: auto;
                }

                .text {
                  padding: 0 0 15px;
                  margin: 15px 0 0 0;

                  &:after {
                    height: 3px;
                    bottom: -2px;
                    width: 50%;
                  }

                  h1 {
                    font-size: 16px;
                    max-height: inherit;
                  }

                  .more {
                    width: 35px;
                    height: 35px;

                    svg {
                      width: 14px;
                      height: 14px;
                    }
                  }
                }
              }
            }
          }
        }
      }

    }

    .how_content {
      width: 90%;
      height: auto;
      padding: 70px 5%;
      margin: 0 auto 30px;

      .joke {
        flex-direction: column;
        align-items: unset;

        .l {
          margin: 0 0 20px;

          h1 {
            font-size: 24px;
            line-height: 1.3;
          }
        }

        .r {
          width: 100%;

          .text {
            font-size: 13px;
            line-height: 1.7;
            margin: 0 0 30px;
          }

          a {
            padding: 4px 15px;
            gap: 10px;
            font-size: 18px;
            border-radius: 80px;

            svg {
              width: 16px;
            }
          }
        }
      }
    }

    .foot {
      margin-top: 0;
    }
  }
}